<template>
  <ul class="list-group list-group-flush pb-5">

    <li class="mb-3 border rounded list-group-item" v-for="(item, index) in articleArr" :key="index">
      <router-link :to="{ path: 'detail', query: { id: item.id } }">
        <div class="media">
          <div class="media-body pe-2">
            <h5 class="mt-0 ellipsis-multiline">{{ item.title }}</h5>
            <div class="time">日期时间 {{ formatDate(item.createAt ? item.createAt : '') }}</div>
            <p v-html="item.content" style="padding: 10px 0px 0px;" class="ellipsis-multiline">
            </p>
            <div class="message d-flex justify-content-between">
              <div class="title ellipsis-multiline">{{ item.tag }}</div>
              <div class="author ms-2">{{ item.author }}</div>
            </div>
          </div>
          <div class="rightImg">
            <img :src="imgUrl(item.src)" class="ml-3 rounded" alt="...">
          </div>
        </div>
      </router-link>
    </li>
  </ul>

  <div v-if="articleArr.length === 0" class="mytext">
    <p>暂无更多数据~~</p>
  </div>
</template>

<script lang="ts" setup>
import { imgUrl, formatDate } from '@/api/index'
defineProps(['articleArr'])



</script>


<style lang="less" scoped>
@import "../static/css/common.less";

.mytext {
  width: 100%;
  height: 200px;
  color: @grey-color;
  text-align: center;
  padding-top: 50px;
}

.list-group-item {
  .media {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .media-body {
      width: calc(100% - 30%);

      .time {
        font-size: 13px;
        color: @grey-color;
      }

      p {
        color: @grey-color;
      }

      .message {
        .author {
          color: @grey-color;
          font-size: 12px;
        }
      }

    }

    .rightImg {
      width: 30%;

      img {
        width: 100%;

      }
    }
  }
}
</style>
